<template>
  <div>
    <scroller lock-x scrollbar-y height="-50" use-pullup @on-pullup-loading="loadMore" v-model="status" ref="scroller">
      <div>
        <span v-show="DataLoading" class="loadingstatus"><spinner type="ios-small"></spinner>加载中...</span>
        <a class="txf-list-box" v-for="item in listcon" :href="item.url" :key="item.id">
          <div class="txf-list-box-hd" :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
          <div class="txf-list-box-bd">
            <h4 class="txf-list-box-bd_title">{{ item.title }}</h4>
            <ul class="txf-list-box-bd_info">
              <li>{{ item.catname }}</li>
              <li>{{ item.addtime }}</li>
              <li>{{ item.viewnum }}阅读</li>
            </ul>
          </div>
        </a>
      </div>
      <div slot="pullup">
        <span class="loadingstatus" v-show="PullupLoading"><spinner type="ios-small"></spinner>加载中...</span>
      </div>
    </scroller>
  </div>
</template>

<script>
import { Scroller, Spinner } from "vux";

export default {
  components: {
    Scroller,
    Spinner
  },
  data() {
    return {
      DataLoading: true,
      PullupLoading: false,
      listcon: [],
      category: 25,
      currentP: 1,
      currentPS: 10,
      status: {
        pullupStatus: "default",
        pulldownStatus: "default"
      },
      toStatus: false
    };
  },
  mounted() {
    this.getListData();
  },
  methods: {
    getListData(){
      return _axios
      .get('api/portal/home/articles', {
        params: {
          category: this.category,
          page: this.currentP,
          page_size: this.currentPS
        }
      })
      .then(response => {
        // this.listcon = response.data.data;
        setTimeout(() => {
          var data = response.data.resp_data;
          for (var i = 0; i < data.length; i++) {
            this.listcon.push(data[i]);
            this.PullupLoading = true;
            this.DataLoading = false;
          }
        }, 1000);
      });
    },
    loadMore () {
      this.currentP ++;
      this.getListData();
      this.$nextTick(() => {
        this.$refs.scroller.donePullup();
      })
    },
    touch () {
      this.toStatus = !this.toStatus;
    }
  }
};
</script>

<style>
@import url("../../styles/common/portal/index.css");
</style>
